<template>
  <div id="app">
    <button @click="func1">点我试试</button>
    <button @click="func2">点我试试</button>
    <button @click="func3">点我试试</button>
    <button @click="func4">点我试试</button>
  </div>
</template>

<script>
export default {
  methods: {
    // 基础调用
    func1() {
      this.$message("报名“前端Web高级开发课程”，让自己赚取高薪!");
    },
    // 更多配置
    func2() {
      this.$message({
        // 提示信息
        message: "报名“前端Web高级开发课程”，让自己赚取高薪!",
        // 类型success/warning/info/error
        type: "warning",
        // 是否显示关闭按钮
        showClose: true,
        // 自动消失时间，默认3000ms，设置为0代表不会自动消失
        duration: 0,
        // 钩子函数:关闭时候处理的事情
        onClose() {}
      });
    },
    // 模态框
    func3() {
      this.$alert("报名“前端Web高级开发课程”，让自己赚取高薪!", "系统提示", {
        confirmButtonText: "确定",
        callback: action => {
          // cancel 或者 confirm
          console.log(action);
        }
      });
    },
    func4() {
      this.$confirm("报名“前端Web高级开发课程”，让自己赚取高薪!", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        // 是否可以通过点击遮罩层让弹出层消失，默认TRUE
        closeOnClickModal: true
      })
        .then(() => {
          // 点击确定
          console.log("OK");
        })
        .catch(() => {
          // 点击取消或者关闭
          console.log("NO");
        });
    }
  }
};
</script>

